<template>
  <div id="index">
    <div class="mui-content">
      <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
          <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
              <img src="../assets/images/demo/a3.jpg">
            </a>
          </div>
          <!-- 第一张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="../assets/images/demo/a1.jpg">
            </a>
          </div>
          <!-- 第二张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="../assets/images/demo/a2.jpg">
            </a>
          </div>
          <!-- 第三张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="../assets/images/demo/a3.jpg">
            </a>
          </div>
          <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
              <img src="../assets/images/demo/a3.jpg">
            </a>
          </div>
        </div>
        <div class="mui-slider-indicator">
          <div class="mui-indicator mui-active"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
        </div>
      </div>
      <div class="marquee">
        <div class="xmkx">
          <!--<img src="../assets/images/index/home_word.png" alt="" />-->
        </div>
        <marquee>
          <marquee-item>187****8135在我来贷获得20000</marquee-item>
          <marquee-item>187****8135在我来贷获得20000</marquee-item>
          <marquee-item>187****8135在我来贷获得20000</marquee-item>
          <marquee-item>187****8135在我来贷获得20000</marquee-item>
        </marquee>
      </div>

      <div class="pros">
        <div class="pro-item">
          <img src="../assets/images/index/m1.png" alt="" />
          <div>产品上新</div>
        </div>
        <div class="pro-item">
          <img src="../assets/images/index/m2.png" alt="" />
          <div>小额极速</div>
        </div>
        <div class="pro-item">
          <img src="../assets/images/index/m4.png" alt="" />
          <div>大额贷款</div>
        </div>
        <div class="pro-item">
          <img src="../assets/images/index/m3.png" alt="" />
          <div>超低利息</div>
        </div>
      </div>
      <div class="towork">
        <img src="../assets/images/index/towork.png" alt="" />
      </div>
      <div class="expec">
        <div><img src="../assets/images/index/xhy.png" alt="" /></div>
        <div><img src="../assets/images/index/bd.png" alt="" /></div>
      </div>
      <div class="bg"></div>
      <div class="list-title">
        <div class="list-title-left">
          <h1><span class="front">精选</span><span class="end">推荐</span></h1>
          <p>优质精选 轻松分期</p>
        </div>
        <div class="list-title-right">
          <img src="../assets/images/ref.png" /> 换一批
        </div>
      </div>
      <ul class="mui-table-view grooms">
        <li class="mui-table-view-cell mui-media groom">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../assets/images/index/x1.png">
            <div class="mui-media-body">
              小黑鱼<span class="label">热门</span>
              <p class="mui-ellipsis">信用卡</p>
            </div>
            <div class="gr-right">
              <span>0.03%</span>日利息
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media groom">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../assets/images/demo/c6.png">
            <div class="mui-media-body">
              易乐飞
              <p class="mui-ellipsis">通过率高、急速贷款</p>
            </div>
            <div class="gr-right">
              <span>0.03%</span>日利息
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media groom">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../assets/images/demo/c7.png">
            <div class="mui-media-body">
              小小金融<span class="label">热门</span><span class="label">热门</span>
              <p class="mui-ellipsis">额度大、大平台、低息</p>
            </div>
            <div class="gr-right">
              <span>0.03%</span>日利息
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media groom">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../assets/images/index/x1.png">
            <div class="mui-media-body">
              小飞鱼
              <p class="mui-ellipsis">信用卡</p>
            </div>
            <div class="gr-right">
              <span>0.03%</span>日利息
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media groom">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../assets/images/demo/c3.png">
            <div class="mui-media-body">
              小飞鱼
              <p class="mui-ellipsis">信用卡</p>
            </div>
            <div class="gr-right">
              <span>0.03%</span>日利息
            </div>
          </a>
        </li>
      </ul>
      <div class="bg"></div>
      <div class="list-title">
        <div class="list-title-left">
          <h1><span class="front">信用</span><span class="end">卡</span></h1>
          <p>一卡在手 方便生活</p>
        </div>
      </div>
      <ul class="mui-table-view grooms cards">
        <li class="mui-table-view-cell mui-media groom card">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../assets/images/index/b1.png">
            <div class="mui-media-body">
              招商金卡1-信用卡
              <p class="mui-ellipsis">网购积分、免首年年费</p>
            </div>
            <div class="gr-right tosee">
              查看
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media groom card">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../assets/images/index/b3.png">
            <div class="mui-media-body">
              招商金卡1-信用卡
              <p class="mui-ellipsis">网购积分、免首年年费</p>
            </div>
            <div class="gr-right tosee">
              查看
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media groom card">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../assets/images/index/b2.png">
            <div class="mui-media-body">
              招商金卡1-信用卡
              <p class="mui-ellipsis">网购积分、免首年年费</p>
            </div>
            <div class="gr-right tosee">
              查看
            </div>
          </a>
        </li>
      </ul>
      <div style="background-color: #f5f5f5;">
        <divider>
          <div class="driver"><img src="../assets/images/common/bottom.png" /></div>
        </divider>
      </div>
    </div>
    <div class="footer">
      <div class="footer-item footer-item-active" @click="gotoPage('index')">
        <span class="mui-icon-house mui-icon-house-active"></span>
        <span class="footer-tab-label footer-tab-label-active">首页</span>
      </div>
      <div class="footer-item" @click="gotoPage('list')">
        <span class="mui-icon-discover" style="left: 40.5%;"></span>
        <span class="footer-tab-label">发现</span>
      </div>
      <!--<div class="footer-item" @click="gotoPage('news')">
        <span class="mui-icon-list"></span>
        <span class="footer-tab-label">资讯</span>
      </div>-->
      <div class="footer-item" @click="gotoPage('login')">
        <span class="mui-icon-my"></span>
        <span class="footer-tab-label">我的</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { Marquee, MarqueeItem, Divider } from 'vux'
  import libs from "@/assets/js/libs";

  export default {
    components: {
      Marquee,
      MarqueeItem,
      Divider,
    },
    mounted() {
      var gallery = mui('.mui-slider');
      gallery.slider({
        interval: 3000 //自动轮播周期，若为0则不自动播放，默认为0；
      });
      setTimeout(() => {
        this.asyncCount = 5
      }, 1000)
    },
    data() {
      return {
        asyncCount: 0,
      };
    },
    methods: {
      gotoPage(url) {
        //判断是否登录
        this.$router.push({
          name: url
        });
      }
    }
  };
</script>
<style lang="scss">
  @import "../assets/css/funcs.scss";
  @import '../assets/css/common.scss';
  #index {
    #slider {
      height: pxToRem(313px);
    }
    .mui-content {
      background-color: #fff;
      margin-bottom: 100px;
      .vux-marquee {
        width: 80%;
        margin: auto;
        float: left;
        margin-left: pxToRem(25px);
      }
      .vux-marquee-box li {
        font-size: pxToRem(23px);
        color: #000;
      }
      .marquee {
        width: 92%;
        margin: auto;
        margin-top: 20px;
        .xmkx {
          width: pxToRem(105px);
          height: 12px;
          font-size: pxToRem(27px);
          float: left;
          position: relative;
          top: 6px;
          background-image: url(../assets/images/index/home_word.png);
          background-size: 100%;
          background-repeat: no-repeat;
        }
      }
    }
    .bg {
      height: pxToRem(17px);
      background-color: #F5F5F5;
      margin: auto;
      clear: both;
    }
    .list-title {
      clear: both;
      height: pxToRem(146px);
      line-height: pxToRem(146px);
      width: 92%;
      margin: auto;
      border-bottom: 1px solid #EEEEEE;
      h1 {
        font-size: pxToRem(35px);
        color: #000;
        font-weight: normal;
        margin-top: pxToRem(40px);
        .front {
          color: #FCA203;
        }
        .end {
          color: #000000;
        }
      }
      p {
        font-size: pxToRem(22px);
        color: #666666;
        margin-top: pxToRem(26px);
        padding: 0;
        line-height: 0;
      }
    }
    .towork {
      width: 92%;
      margin: auto;
      margin-top: pxToRem(50px);
      img {
        width: 100%;
      }
    }
    .pros {
      clear: both;
      display: flex;
      justify-content: space-between;
      width: 90%;
      margin: auto;
      .pro-item {
        padding-top: pxToRem(50px);
        float: left;
        line-height: pxToRem(40px);
        img {
          width: pxToRem(50px);
          height: pxToRem(47px);
        }
        width: 18%;
        text-align: center;
        font-size: pxToRem(22px);
        color: #666;
        div {
          margin-top: 1px;
        }
      }
    }
    .expec {
      width: 92%;
      margin: auto;
      margin-top: pxToRem(15px);
      padding-bottom: pxToRem(50px);
      display: flex;
      justify-content: space-between;
      div {
        width: 50%;
        img {
          width: 100%;
        }
      }
    }
    .expec>div:first-child {
      margin-right: pxToRem(14px);
    }
    .list-title-left {
      float: left;
    }
    .list-title-right {
      float: right;
      img {
        width: pxToRem(32px);
        height: pxToRem(32px);
        position: relative;
        top: pxToRem(58px);
      }
      font-size:pxToRem(25px);
      color:#999999;
    }
    .mui-table-view:after {
      background-color: transparent;
    }
    .mui-table-view:before {
      background-color: transparent;
    }
    .mui-table-view-cell:after {
      left: 5px;
    }
    .mui-table-view-cell>a:not(.mui-btn) {
      margin: -11px -30px;
    }
    .grooms {
      .mui-media-body {
        float: left;
        font-size: pxToRem(29px);
        color: #000;
        position: relative;
        top: 1px;
        padding-top: 1px;
        .mui-ellipsis {
          font-size: pxToRem(23px);
          color: #999999;
          position: relative;
          top: -4px;
        }
      }
      .label {
        border: 1px solid #FF8800;
        border-radius: 4px;
        font-size: pxToRem(17px);
        color: #FF8800;
        margin-left: 5px;
        padding: 1px 5px;
        font-size: 12px;
        position: relative;
        top: -1px;
      }
      .gr-right {
        position: relative;
        top: 10px;
        float: right;
        font-size: pxToRem(22px);
        color: #999999;
        span {
          color: #FF8800;
        }
      }
      .groom {
        padding: 13.5px 16px;
        width: 94%;
        margin: auto;
        img {
          line-height: 40px;
          max-width: 40px;
          height: 40px;
          border-radius: 4px;
        }
      }
    }
    .cards {
      .mui-media-body {
        top: 3px;
      }
      .groom {
        padding: 14.5px 16px;
        .mui-ellipsis {
          font-size: pxToRem(23px);
          color: #999999;
          position: relative;
          top: 0px;
        }
      }
    }
    .tosee {
      color: #FEFEFE!important;
      font-size: pxToRem(26px);
      background-color: #FF8800;
      width: pxToRem(94px);
      text-align: center;
      height: 23px;
      line-height: 23px;
      border-radius: 4px;
    }
    .card {
      img {
        max-width: pxToRem(147px)!important;
        height: pxToRem(95px)!important;
        border-radius: 0!important;
        width: 30%;
      }
    }
    .driver {
      width: 20%;
      img {
        width: 58px;
        height: 16px;
      }
    }
    .vux-divider {
      width: 72%;
      margin: auto;
      margin-top: 5px;
    }
  }
</style>
